<template>
  <div class="root-div">

    <!-- 显示社团分类 -->
    <el-row :gutter="10" class="categories" justify="space-evenly">
      <el-col :span="3" v-for="category in categories" :key="category.id">
        <el-button
          @click="filterByCategory(category)"
          type="warning"
          plain
          :class="{ 'selected-category': selectedCategory === category.name }"
          class="category-button"
        >
        <el-icon class="icon">
            <component :is="getIcon(category.id)"></component>
          </el-icon>
          {{ category.name }}
        </el-button>
      </el-col>
    </el-row>

    <el-divider />
    
    <el-pagination @current-change="pageFeed" :current-page="current" :page-size=size
      layout="prev, pager, next,total" :total="total">
    </el-pagination>

    <!-- 显示筛选后的社团 -->
    <el-row :gutter="10" class="clubs" justify="space-evenly">
      
      <el-col v-if="clubs.length === 0">
        <div class="alert alert-warning alert-dismissible fade show" role="alert">
          <strong>暂无此类社团</strong> 切换到别的分类看看吧！
          <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
      </el-col>

      <ClubShow class="detail" v-for="club in clubs" :key="club.id" :club="club" />
    </el-row>
  </div>
</template>

<script>
import ClubShow from "./ClubShow.vue";
import axios from "axios";
import {
  Folder,
  Trophy,
  Service,
  Briefcase,
  Promotion,
  Lightning,
  Headset
} from '@element-plus/icons-vue'

export default {
  name: "ClubList",
  components: {
    ClubShow,
    Folder,
    Trophy,
    Service,
    Briefcase,
    Promotion,
    Lightning,
    Headset
  },
  data() {
    return {

      //社团分类列表
      categories: [],
      clubs: [],
      selectedCategory: null,
      total: 0,
      size: 8,
      current: 1,
      pages: 1,
      categoryList:[]
    };
  },

  created() {
    this.getClubCategoryList()
    const selectedCategory = this.$route.query.selectedCategory;
    if (selectedCategory) {
      this.selectedCategory = selectedCategory;
      this.fetchClubs(this.selectedCategory);
    } else {
      this.fetchClubs();
    }
  },

  methods: {

    getClubCategoryList(){
      axios.get("/Attribute/ClubCategoryList")
        .then(response => {
          this.categories = response.data.data.map((item,index) => ({
            id: index+1,
            name: item
          }));

          this.categoryList = this.categories.map(category => category.name);
        })
        .catch(error => {
          console.error('Error fetching categories:', error);
        });
    },

    fetchClubs(category=" ") {
      let params = {
        pageNum: this.current,
        clubCategory: category,
      };
      axios
        .get("/club/browseClubs", { params })
        .then((response) => {
          // 处理服务器返回的数据
          const records = response.data.data.records;
          this.total=response.data.data.total;
          this.size=response.data.data.size;
          this.current=response.data.data.current;
          this.pages=response.data.data.pages;
          this.clubs = records.map((record) => ({
            id: record.clubId,
            name: record.clubName,
            category: record.category,
            image: record.logoUrl,
            description: record.clubDescription,
          }));
        })
        .catch((error) => {
          console.error("Error fetching clubs:", error);
        });
    },

    filterByCategory(category) {
      if (this.selectedCategory === category.name) {
        // 如果再次点击同一个分类，清除选择并显示所有社团
        this.selectedCategory = null;
        this.fetchClubs();
        this.$router.push({ query: {} });
      } else {
        // 选择新的分类
        this.selectedCategory = category.name;
        this.fetchClubs(category.name);
        this.$router.push({ query: { selectedCategory: category.name } });
      }
    },
    getIcon(categoryId) {
      switch (categoryId) {
        case 1:
          return Folder;
        case 2:
          return Trophy;
        case 3:
          return Service;
        case 4:
          return Briefcase;
        case 5:
          return Promotion;
        case 6:
          return Lightning;
        case 7:
          return Headset;
        default:
          return Folder;
      }
    },

    pageFeed(newPageNum){

      if(newPageNum==this.current){
        return;
      }

      this.current=newPageNum;
      if(this.selectedCategory==null){
        this.fetchClubs();
      }else {
        this.fetchClubs(this.selectedCategory);
      }
    }
  },
};
</script>

<style scoped>

body {
  background: linear-gradient(135deg, #f6e6cb 0%, #f3d9a5 100%);
  /* background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);
  background-repeat: no-repeat;
  background-attachment: fixed; */
}


.categories {
  margin-bottom: 50px;
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 20px 0;
}

.category-button {
  width: 160px;
  height: 55px;
  border-radius: 10px;
  background-color: #f5f5f5;
  color: #333;
  border: none;
  font-size: 16px;
  font-weight: bold;
  transition: background-color 0.3s ease, color 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.category-button .icon {
  font-size: 20px;
  margin-right: 10px;
  color: #fff;
}

.selected-category {
  background-color: #e6a23c !important;
  color: #fff !important;
}

.selected-category .icon {
  color: #333 !important;
}

.clubs {
  display: flex;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  justify-content: center;
  align-items: center;
  gap: 40px;
  padding: 0;
}

.club-card {
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  transition: box-shadow 0.3s ease;
}

.club-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.club-logo {
  width: 100%;
  height: auto;
  border-radius: 12px;
  margin-bottom: 18px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.club-name {
  font-size: 1.1em;
  font-weight: bold;
  color: #333;
  margin-bottom: 8px;
}

.description {
  color: #666;
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
  margin-bottom: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

.el-button {
  background-color: #ffc107;
  color: #fff;
  border: none;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: bold;
}

.el-button:hover {
  background-color: #ffdb58;
  box-shadow: 0 8px 18px rgba(255, 193, 7, 0.4);
}

.el-pagination {
  display: flex;
  justify-content: center;
  margin: 20px;
}
</style>
